/* eslint-disable */
<template>
  <div  class='container-fluid' >
    <div class='row' v-show='isLogin'>
      <nav class='navbar navbar-expand-sm bg-primary text-white navbar-dark' id="nav-bar">
        <a class='navbar-brand' href='#'><img src="./assets/logo.png"></a>
        <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#collapsibleNavbar'>
          <span class='navbar-toggler-icon'></span>
        </button>
        <div class='collapse navbar-collapse' id='collapsibleNavbar'>
          <ul class='navbar-nav' v-for="nav in navList" :key="nav.href">
            <li class='nav-item'>
              <a class='nav-link' v-on:click='go(nav.href)' v-bind:class="{ 'active': contains(nav.href) }">{{nav.text}}</a>
            </li>
          </ul>

        </div>
        <form class="d-flex">
          <input class="form-control me-2" type="text" placeholder="Search">
          <button class="btn btn-primary" type="button">Search</button>
        </form>

      </nav>
    </div>

    <div class="row p-5 my-5 " >
      <div id="left_menu" class='col-sm-3' v-show='isLogin'>
        <nav class='navbar bg-light' v-if="contains('/tool') || isChildren('/tool')">
          <ul class='nav flex-column'>
            <li class='nav-item'>
              <a class='nav-link' v-on:click='go("/tool/timestamp")'>时间戳</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='#'>base64</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='#'>RSA</a>
            </li>
          </ul>
        </nav>
        <nav class='navbar bg-light' v-if="contains('/user') || isChildren('/user')">
          <ul class='nav flex-column'>
            <li class='nav-item'>
              <a class='nav-link' v-on:click='go("/user/list")'>用户管理</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='#'>角色管理</a>
            </li>
            <li class='nav-item'>
              <a class='nav-link' href='#'>字典管理</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class='col-sm-3'  v-if='!isLogin'></div><!--站住空行-->
      <div class='col-sm-7'  v-if='isLogin'>.
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
      </div>
      <div class='col-sm-7' id="login" v-if='!isLogin'>

          <div class="col-xs-12">
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-fw fa-user"></i></div>
                <input type="text" v-model="username" class="form-control" placeholder="Username">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-fw fa-lock"></i></div>
                <input type="password" v-model="password" class="form-control" placeholder="Password">
              </div>
            </div>
          </div>
          <div class="col-xs-6">
            <button v-on:click="login" class="btn btn-block btn-primary">Sign in</button>
          </div>
      </div>
      <div class='col-sm-2' v-show="isLogin">
        <div><ShowMsg title="content"></ShowMsg></div>
      </div>
    </div>

  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'App',
  data () {
    return {
      username: '',
      password: '',
      isLogin: false,
      content: '',
      navList: [{
        state: 'portal',
        text: '主页',
        href: '/'
      }, {
        state: 'portal.user',
        text: '系统设置',
        href: '/user'
      }, {
        state: 'portal.interview',
        text: '问题',
        href: '/zhangyi'
      }, {
        state: 'portal.blog',
        text: '博客',
        href: '/helloworld'
      }, {
        state: 'portal.eoms',
        text: '功能',
        href: '/tool'
      }]
    }
  },
  watch: {
    isLogin: function (newValue, oldValue) {
      console.log(newValue + '-----' + oldValue)
    }
  },
  created () {
    console.log(this)
    var token = sessionStorage.getItem('token')
    if (token === '' || token === null) {
      this.isLogin = false
    } else {
      this.isLogin = true
      this.$global.login = true
    }
    this.content = 'Heelo'
    this.showToast = true
  },
  methods: {
    login: function () {
      var req = {
        method: 'post',
        url: 'http://127.0.0.1:9400/auth/v1/login',
        withCredentials: true,
        route: this.$router,
        username: this.username,
        password: this.password,
        axios: this.$axios,
        global: this.$global,
        skipTo: this.skipTo
      }
      this.$axios.post(req.url, '{}').then(function (result) {
        console.log('登录成功' + result)
      }).catch(function (e) {
        if (e.code === 'ERR_NETWORK') {
          alert('服务离线了')
          return
        }
        if (e.response.status === 401) {
          var authHeader = e.response.headers.authenticate
          if (authHeader !== '') {
            var validAuth = authHeader.slice(6)
            var strings = validAuth.split(',')
            var json = {}
            strings.forEach(item => {
              var strings2 = item.split('=', 2)
              json[strings2[0].trim()] = strings2[1].replaceAll('\'', '').trim()
            })
            let realm = json['realm']
            var qop = json['qop']
            var nonce = json['nonce']
            var cnonce = '00000001'
            var nc = '00000001'
            var uri = '/VIID/auth/v1/login'
            var paramas1 = req.username + ':' + realm + ':' + req.password
            var params2 = 'POST:/VIID/auth/v1/login'
            var params3 = md5(paramas1) + ':' + nonce + ':' + nc + ':' + ':' + cnonce +
              ':' + qop + ':' + md5(params2)
            var responseStr = md5(params3)
            var authorization = 'Digest username=' + req.username + ',realm=' + realm + ',nonce=' + nonce + ',uri=' + uri +
              ',response=' + responseStr + ',cnonce=' + cnonce + ',qop=' + qop + ',nc=' + nc
            req.axios.post(req.url, {}, {headers: {'authorization': authorization}}).then(function () {
              sessionStorage.setItem('token', authorization)
              req.skipTo(authorization)
            }).catch(function (e) {
              console.log(e)
            })
          }
        }
      })
    },
    go: function (result) {
      this.$router.push({path: result, query: {timestamp: new Date().getTime()}})
    },
    skipTo: function (authorization) {
      this.isLogin = true
      this.$global.token = authorization
    },
    contains: function (route) {
      if (this.$router.currentRoute.fullPath === route) {
        return true
      }
      return false
    },
    cancel: function () {
      this.$global.login = false
    },
    isChildren: function (route) {
      if (this.$router.currentRoute.fullPath.indexOf(route) === 0) {
        return true
      }
      return false
    }
  }
}
</script>
<style>
#login {
  margin-top: 15rem !important
}
#nav-bar {
  height: 70px;
}
#left_menu{
  margin-top: 160px;
}
</style>
